<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
            <el-form-item label="入库时间" prop="dateInfo">
                <el-date-picker clearable v-model="queryParams.dateInfo" type="date" value-format="yyyy-MM-dd"
                    placeholder="请选择日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="pushManual"
                v-hasPermi="['merchant:baseInfo:pushManual']">推送</el-button>
            </el-col>
        </el-row>

        <el-table v-loading="loading" :data="poolInfoList">
            <el-table-column label="用户ID" align="center" prop="uid" fixed-width="200">
                <template slot-scope="scope">
                    <span class="clickable-uid" @click="handleDetailsDialog(scope.row)">{{ scope.row.uid }}</span>
                </template>
            </el-table-column>
            <el-table-column label="客户跟踪" align="center" prop="remarkInfo" width="300">
                <template slot-scope="scope">
                    <span v-html="scope.row.remarkInfo"></span>
                </template>
            </el-table-column>>
            <el-table-column label="客户星级" align="center" prop="starNumberName" />
            <el-table-column label="跟进情况" align="center" prop="stateInfoName" />
            <el-table-column label="入库时间" align="center">
                <template slot-scope="scope">
                    {{ formatTimestamp(scope.row.createTime) }}
                </template>
            </el-table-column>
        </el-table>


        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
            @pagination="getList" />

        <!-- 用户详情弹窗 -->
        <Member ref="MemberRef" />
    </div>
</template>
<style scoped>
.clickable-uid {
    cursor: pointer;
    color: blue;
}
</style>
<script>


import { listPoolInfo } from "@/api/merchantdata/poolInfo";
import Member from '@/views/member/memeber.vue'
export default {
    name: "PoolInfo",
    components: {
        Member
    },
    data() {
        return {
            rules: {
            },
            dialogVisible: false,
            fenpeidialogVisible: false,
            dialogTitle: "",
            updateType: "",
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 商户客户公海信息表格数据
            poolInfoList: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10
            },
            infoId: "" // 商户ID
        };
    },
    created() {
        this.getList();
        this.infoId = this.$route.query.infoId;
    },

    methods: {
        pushManual(){
            // 跳转手动推送
            this.$router.push({path: '/merchant/pushManual', query: {infoId: this.infoId}})
        },
        /**转换入库时间格式 */
        formatTimestamp(timestamp) {
            if (!timestamp) {
                return '';
            }
            const date = new Date(timestamp);
            const formattedDate = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
            return formattedDate;
        },
        /**用户uid跳转 */
        async handleDetailsDialog(row) {
            this.$refs.MemberRef.show(row.uid)
        },
        /** 查询商户客户公海信息列表 */
        getList() {
            this.loading = true;
            this.queryParams.infoId = this.$route.query.infoId;
            listPoolInfo(this.queryParams).then(response => {
                this.poolInfoList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },

        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },


    }
};
</script>
  